<template>
  <div class="content">
    <div class="chart">
      <h3>图表一</h3>
      <Echarts :options="option3"
        :loading="false"
       />
    </div>
    <div class="chart">
      <Echarts :options="option4"></Echarts>
    </div>
    <div class="map3">
      <h3>图表3</h3>
      <Echarts :options="threeOption"></Echarts>
    </div>
    <div class="cursor-chart">
      <h3>图表4</h3>
      <Echarts></Echarts>
    </div>
  </div>
</template>

<script>

import Echarts from "@/components/Echarts.vue";
import option from "./optionMixin.js";
export default {
  components: {
    Echarts,
  },
  mixins: [option],
  data() {
    return {
      chartOptions: {
        title: {
          text: "ECharts 示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },

    };
  },
  methods: {},
  created() {},
  mounted() {
    // 打印混入
    console.log(this.title);
  },
};
</script>
<style lang="less" scoped>
.chart {
  width: 100%;
  height: 500px;
  // background-color: aqua;
}
.map3{
  width: 100%;
  height: 500px;
  // background-color: red;
}
.cursor-chart{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
  // background-color: blue;
}
</style>
